<template>
  <div class="Index">
    <cropper :imgUrl="baseUrl" v-if="show" @crop="crop"></cropper>
    <el-form ref="form" :model="getForm" label-width="80px" style="margin-top: 20px">
      <el-form-item label="上传">
        <label class="header-text" for="imageBtn">
          选择文件
          <input type="file" ref="file" id="imageBtn" @change="BLL.upload()" accept="image/jpg,png,jpeg" style="display: none">
        </label>
      </el-form-item>
      <el-form-item label="图片地址">
        <el-input v-model="getForm.url"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import cropper from '../../components/Cropper'
import BLL from './Index'
export default {
  components: {
    cropper
  },
  data () {
    return {
      baseUrl: '',
      show: false,
      getForm: {
        url: ''
      }
    }
  },
  created () {
    this.BLL = new BLL(this)
  },
  methods: {
    crop (e) {
      if (e) {
        this.show = false
        this.getForm.url = e
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .header-text {
    background-color: #2d8cf0;
    padding: 5px 15px;
    color: #fff;
  }
  .header-text:hover {
    opacity: .8;
  }
</style>
